<%@ taglib uri="/struts-tags" prefix="s"%>

<script>

	$(function() {
			
		$( ".button" ).button();				
		$(".formtb tr:odd").addClass("odd");
		$(".formtb tr:even").addClass("even");
		
	});
</script> 

<script type="text/javascript">
	var oTable;

	$(function() {
		
		oTable = $('#tbBusquedaClientes').dataTable({
			"bJQueryUI": true,
			"sPaginationType" : "full_numbers",
			"bFilter" : false,
			"bProcessing": true,
			"fnDrawCallback": function(oSettings){
			  $('table#tbBusquedaClientes td').bind('mouseenter', function () {
				   $(this).parent().children().each(function(){$(this).addClass('datatablerowhighlight');}); });
			  $('table#tbBusquedaClientes td').bind('mouseleave', function () { 
			  	   $(this).parent().children().each(function(){$(this).removeClass('datatablerowhighlight');}); });
				   
			},
			"sAjaxSource": null,
			"aoColumns" : 
				[ 
				{"mData" : "idPersona"}, 
				{"mData" : "nombres"},
				{"mData" : "tipoPersona"}, 
				{"mData" : "email"}, 
				{"mData" : "telefono"}, 
				{"mData" : "direccion"}, 
				{"mData" : "fechaRegistro"} 
				]
		
		});
		
		$('#tbBusquedaClientes tbody tr').live('click', function(e) {
			
			if ($(this).hasClass('row_selected')) {
				$(this).removeClass('row_selected');
			} else {
				oTable.$('tr.row_selected').removeClass('row_selected');
				$(this).addClass('row_selected');
			}
			
			var nTds = $('td', this);
			var id = $(nTds[0]).text();
			var descrip = $(nTds[1]).text();
			$("#h_idPersona").val(id);
			$("#h_nombrePersona").val(descrip);
			//alert(id);
		});
		
	});

	
 	function buscar(){
		
		parametros = {
				"nombres": $('#nombres').val()
			 };
		
	
		$.getJSON("/SolucionPresentacionWeb/personas/buscar-clientes.action", parametros, function(json){
			var oSettings = oTable.fnSettings();
			oTable.fnClearTable(this);
		    for (var i=0; i<json.aaData.length; i++)
		    {
		    	oTable.oApi._fnAddData(oSettings, json.aaData[i]);
		    }
		    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
		    oTable.fnDraw();
		});

	} 
	
</script>

<s:form action="buscar-articulos" name="/" theme="simple">

	<table width="100%" border="0" cellspacing="1" cellpadding="3"
		class="formtb" bgcolor="#bcb9a7">
		<tr>
			<td colspan="2"><strong>Filtrado</strong></td>
		</tr>
		<tr>
			<td width="21%">Nombre Cliente</td>
			<td width="79%"><s:textfield name="nombres" id="nombres"
					size="70" /></td>
		</tr>

		<tr>
			<td>&nbsp;</td>
			<td><input type="button" value="Buscar" class="button"
				onclick="buscar()" /></td>
		</tr>

		<tr>
			<td colspan="2"><s:hidden name="h_idPersona" id="h_idPersona" />
				<s:hidden name="h_nombrePersona" id="h_nombrePersona" /> <input
				type="button" id="btnSeleccionar" value="Seleccionar" class="button" />

			</td>
		</tr>
		<tr>
			<td colspan="2"><table cellpadding="0" cellspacing="0"
					border="0" class="display" id="tbBusquedaClientes">
					<thead>
						<tr>
							<th>Id Cliente</th>
							<th>Nombres</th>
							<th>Tipo Cliente</th>
							<th>Email</th>
							<th>Telefono</th>
							<th>Direccion</th>
							<th>Fecha Registro</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
					<tfoot>
						<tr>
							<th>Id Cliente</th>
							<th>Nombres</th>
							<th>Tipo Cliente</th>
							<th>Email</th>
							<th>Telefono</th>
							<th>Direccion</th>
							<th>Fecha Registro</th>
						</tr>
					</tfoot>
				</table></td>
		</tr>

	</table>
</s:form>


